<template>
    <div class="header-container">
        <div class="l-content">
            <el-button  style="margin-rigeht: 20px" icon="el-icon-menu" size="mini" @click="handleMenu" ></el-button>
            <!-- 面包屑 -->
            <el-breadcrumb separator="/"  >
                <el-breadcrumb-item v-for="item in tags" :key="item.path" :to="{ path: item.path }">{{ item.label }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="r-content">
            <el-dropdown>
                <span class="el-dropdown-link">
                    <img class="user" src="../assets/user.png" alt="">
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item>退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</template>

<script>

import { mapState } from 'vuex'
export default {
    data() {
        return {

        };
    },
    methods: {
        handleMenu() {
            this.$store.commit('collapseMenu')
        }
    },
    computed: {
        ...mapState({
            tags: state => state.tab.tabList
        })
    }
};
</script>

<style lang="less" scoped>
.header-container {
    background-color: #333;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 20px;
    span {
        font-size: 14px;
        color: #fff;
        margin-left: 10px;
    }
}
.el-dropdown-link {
    cursor: pointer;
    color: #409eff;
}
.el-icon-arrow-down {
    font-size: 12px;
}
.r-content {
    .user {
        width: 40px;
        height: 40px;
        border-radius: 50%;

    }
}
.l-content {
    display: flex;
    align-items: center;
    /deep/.el-breadcrumb__item {
        .el-breadcrumb__inner  {
            font-weight: normal;
            &.is-link {
                color: #666;
            }
        }
        &:last-child {
            .el-breadcrumb__inner {
                color: #fff;
            }
        }
    }

}
</style>>